// K线图颜色配置
const upColor = "#ec0000"
const upBorderColor = "#8A0000"
const downColor = "#00da3c"
const downBorderColor = "#008F28"


const App = {
	delimiters: ['[{', '}]'],
	data: function() {
		return {
			// 表单数据
			stockForm: {
				code: '000001.SZ',
				data1: "",
				data2: "",
			},
			tabName: "first",
			// 图表数据
			kChartdata: "K线图",
			// 预测信息
			forcastMsg: "预测信息",
			// 股票名
			stockName: "中国平安",
			// 表格数据
			tableData: [{
					date: '2016-05-03',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-02',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-04',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
				{
					date: '2016-05-01',
					name: 'Tom',
					address: 'No. 189, Grove St, Los Angeles',
				},
			],
		}
	},
	created: function() {
		this.stockFormSubmit();
	},
	methods: {
		getNowTime() {
			const yy = new Date().getFullYear()
			const MM = (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : (new Date()
				.getMonth() + 1)
			const dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new
			Date().getDate()
			const HH = new Date().getHours() < 10 ? '0' + new Date().getHours() : new
			Date().getHours()
			const mm = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() :
				new Date().getMinutes()
			const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() :
				new Date().getSeconds()
			const time = yy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss;
			return time
		},
		async stockFormSubmit() {
			try {
				const {
					data: res
				} = await axios.post("http://127.0.0.1:12345/stock", this.stockForm);
				// console.log(res);
				if (res.status == 200) {
					// 重新赋值新的股票数据
					var myChart = echarts.init(document.getElementById('main'))
					this.kChartdata = res.stock_data
					this.forcastMsg = this.kChartdata.forcast
					this.stockName = this.kChartdata.name
					var option = {
						// 图表标题配置
						title: {
							text: this.stockName + '近一年K线图'
						},
						// 提示框配置
						tooltip: {
							// 是否显示提示框
							show: true,
							// 触发类型，axis 移动到坐标轴就触发
							trigger: "axis",
							// 坐标轴上提示点设置
							axisPointer: {
								type: "cross"
							}
						},
						// 图例配置
						legend: {
							data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
						},
						// X 轴配置项
						xAxis: {
							type: "category",
							data: this.kChartdata.stock_trade_days,
							boundaryGap: false,
							axisLine: {
								onZero: false
							},
							splitLine: {
								show: true
							},
							min: "dataMin",
							max: "dataMax"
						},
						// y 轴配置项
						yAxis: {
							scale: true,
							splitArea: {
								show: true
							}
						},
						dataZoom: [{
								type: "inside",
								start: 50,
								end: 100
							},
							{
								show: true,
								type: "slider",
								top: "90%",
								start: 50,
								end: 100
							}
						],
						// 系列配置，根据不同图表有不同的配置
						series: [{
								name: "日K",
								// 图表类型
								type: 'candlestick',
								// 数据内容
								data: this.kChartdata.stock_trade_data,
								// K 线图的图形样式
								itemStyle: {
									// 阳线 图形的颜色
									color: upColor,
									// 阴线 图形的颜色。
									color0: downColor,
									// 阳线 图形的描边颜色
									borderColor: upBorderColor,
									// 阴线 图形的描边颜色
									borderVolor0: downBorderColor
								},
								// 标记点配置
								markPoint: {
									// 标注的文本
									label: {
										// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
										// 参数 params 是 formatter 需要的单个数据集, value是传入的数据值。
										formatter: function(param) {
											return param != null ? Math.round(param.value) + "" :
												"";
										}
									},
									// 标注的数据数组。每个数组项是一个对象
									data: [
										// 特殊的标注类型，用于标注最大值最小值等
										{
											name: "highest value",
											type: "max",
											// 在使用 type 时有效，用于指定在哪个维度上指定最大值最小值。
											valueDim: "highest",
										},
										{
											name: 'lowest value',
											type: 'min',
											valueDim: 'lowest'
										},
										{
											name: 'average value on close',
											type: 'average',
											valueDim: 'close'
										}
									],
									// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
									tooltip: {
										// params 是 formatter 需要的数据集
										formatter: function(param) {
											// name数据名，类目名,data传入的原始数据项
											return param.name + "<br>" + (param.data.coord || "")
										}
									}
								},
								markLine: {
									// 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定
									symbol: ['none', 'none'],
									// 标线的数据数组。每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象
									data: [
										[
											// 定义从最小值到最大值的线
											{
												name: "from lowest to highest",
												type: "min",
												valueDim: "lowest",
												symbol: "circle",
												symbolSize: 10,
												label: {
													show: false
												},
												emphasis: {
													label: {
														show: false
													}
												}
											},
											{
												type: "max",
												valueDim: "highest",
												symbol: "circle",
												symbolSize: 10,
												label: {
													show: false
												},
												emphasis: {
													label: {
														show: false
													}
												}
											},
										],
										// 最小值水平线
										{
											name: "min line on close",
											type: "min",
											valueDim: "close"
										},
										// 最大值水平线
										{
											name: "max line on close",
											type: "max",
											valueDim: "close"
										},
									],
								}
							},
							{
								name: "MA5",
								type: "line",
								data: this.kChartdata.MA5,
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: "MA10",
								type: "line",
								data: this.kChartdata.MA10,
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: "MA20",
								type: "line",
								data: this.kChartdata.MA20,
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
							{
								name: "MA30",
								type: "line",
								data: this.kChartdata.MA30,
								smooth: true,
								lineStyle: {
									opacity: 0.5
								}
							},
						]
					}
					//使用刚指定的配置项和数据显示图像
					myChart.setOption(option);
					this.$message({
						showClose: true,
						message: res.msg,
						center: true,
						type: 'success'
					});
				} else {
					// 弹窗服务器返回的错误信息
					this.$message({
						showClose: true,
						message: res.msg,
						center: true,
						type: 'error',
						duration: 10000
					})
				}
			} catch (e) {
				console.log(e);
				// 数据请求错误，10秒弹框
				this.$message({
					showClose: true,
					message: "服务器内部错误：" + e,
					center: true,
					type: 'error',
					duration: 10000
				})
			}

		}
	}
};
const app = Vue.createApp(App);
app.use(ElementPlus);
app.mount('#app');